<template>
    <view class="w-process">
        <view class="invoice">
            <view class="invoiceBox" @click="scanInvoice">
                <img class="invoiceImg" src="./img/scan.png" />
                <view class="invoiceText" style="margin-top:5rpx">发票采集</view>
            </view>
            <view class="invoiceBox" @click="manualAddInvoice">
                <img class="invoiceImg" src="./img/add.png" />
                <view class="invoiceText" >手动添加</view>
            </view>
        </view>
        <!-- 我的发票 -->
        <view class="invoiceBlock" @click="meInvoices">
            <view class="invoiceBlock-text">
                <img class="invoiceBlock-img" src="./img/mine.png" />
                我的发票
            </view>
            <view class="invoiceBlock-btn">{{ '>' }}</view>
        </view>
        <!-- 抬头 -->
        <view class="commonfunctions">
            <view class="functionTitle">常用功能</view>
            <view class="functionBlock">
                <view class="functionItem" @click="invoice">
                    <img class="functionItem-img" src="./img/invoice.png" />
                    <view class="functionItem-text">发票抬头</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import { getLang } from '@/locale/index';

const { t } = useI18n();

// 跳转发票抬头
const invoice = () => {
    uni.navigateTo({
        url: '/pages/invoiceAssistant/invoiceTitle'
    });
}

// 扫描发票
const scanInvoice=()=>{
    uni.navigateTo({
        url: '/pages/invoiceAssistant/invoiceCollection'
    });
}

// 手动添加发票
const manualAddInvoice=()=>{
    uni.navigateTo({
        url: '/pages/invoiceAssistant/manualAdd'
    });
}
// 我的发票
const meInvoices=()=>{
    uni.navigateTo({
        url: '/pages/invoiceAssistant/meInvoice'
    });
}

</script>

<style lang="less" scoped>
.w-process {
    width: 100%;
	height: calc(100vh - 88rpx);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #F5F5f5;

    .invoice {
        background: #33C5B9;
        width: 96%;
        height: 240rpx;
        margin: 24rpx auto;
        border-radius: 10rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .invoiceBox {
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;
            width: 160rpx;

            .invoiceImg {
                display: block;
                width: 80rpx;
                height: 80rpx;
                margin: 0 auto;
            }

            .invoiceText {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
            }
        }
    }

    .invoiceBlock {
        margin: 0 20rpx;
        height: 80rpx;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10rpx;

        .invoiceBlock-text {
            width: 80%;
            height: 96%;
            padding-left: 2%;
            box-sizing: border-box;
            text-align: left;
            line-height: 80rpx;

            .invoiceBlock-img {
                display: inline-block;
                width: 40rpx;
                height: 40rpx;
                margin: auto 0;
            }
        }

        .invoiceBlock-btn {
            padding-right: 2%;
            flex: 1;
            text-align: right;
            box-sizing: border-box;
            line-height: 80rpx;
            font-size: 26rpx;
        }
    }

    .commonfunctions {
        width: 96%;
        height: 265rpx;
        background: rgba(255, 255, 255, 1);
        border-radius: 10rpx;
        margin: 24rpx auto 0;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .functionTitle {
            height: 72rpx;
            line-height: 72rpx;
            border-bottom: 1px solid #F5F5f5;
            color: #212121;
            font-size: 24rpx;
            text-align: left;
            padding: 0 12rpx;
            box-sizing: border-box;
        }

        .functionBlock {
            flex: 1;

            .functionItem {
                float: left;
                width: 33%;
                vertical-align: top;
                text-align: center;
                height: 100%;
                border-right: 1px solid #F5F5f5;
                margin-top: 40rpx;

                .functionItem-img {
                    width: 40px;
                    height: 40px;
                    display: block;
                    margin: 0 auto;
                }

                .functionItem-text {
                    text-align: center;
                    font-size: 20rpx;
                    font-weight: 400;
                    color: #212121;
                }
            }
        }
    }
}
</style>ss